import "./app.scss";
import React, { useState } from "react";
import data from "./data.js";
import Son from './Son'
const App = () => {
  const form_top = [
    {
      name: "A款·升杯体验装",
      mani: "官网直销价：¥418元",
      num: 0,
      bot: "¥418.00元",
    },
    {
      name: "A款·升杯体验装",
      mani: "官网直销价：¥418元",
      num: 0,
      bot: "¥418.00元",
    },
    {
      name: "A款·升杯体验装",
      mani: "官网直销价：¥418元",
      num: 0,
      bot: "¥418.00元",
    },
    {
      name: "A款·升杯体验装",
      mani: "官网直销价：¥418元",
      num: 0,
      bot: "¥418.00元",
    },
    {
      name: "A款·升杯体验装",
      mani: "官网直销价：¥418元",
      num: 0,
      bot: "¥418.00元",
    },
  ];

  return (
    <div className="box">
      <div className="left">
        <div className="form">
          <form>
            <div>
              <ul>
                <li>
                  <div className="form-top">选择</div>
                  <div className="form-name">商品名称</div>
                  <div className="form-mani">商品单价</div>
                  <div className="form-num">单价</div>
                  <div className="form-bot">小计</div>
                </li>
                {form_top.map((item, index) => {
                  return (
                    <li key={index}>
                      <div className="form-top">
                        <input type="checkbox" />
                      </div>
                      <div className="form-name">{item.name}</div>
                      <div className="form-mani">{item.mani}</div>
                      <div className="form-num">{item.num}</div>
                      <div className="form-bot">{item.bot}</div>
                    </li>
                  );
                })}
                <li className="form-footer">
                  <div>
                    <small>温馨提示：在线支付9折优惠</small>
                  </div>
                  <div>
                    <b>商品总价：</b>
                    <span>¥1066</span>
                  </div>
                </li>
              </ul>
            </div>
          </form>
        </div>
        <div className="input">
          <form action="">
            <label htmlFor="">
              <span>姓名:</span>
              <input type="text" className="input-name" />
              <span>
                <i>*</i>
                请填写收货人姓名。
              </span>
            </label>
            <label htmlFor="">
              <span>手机:</span>
              <input type="text" className="input-name" />
              <span>
                <i>*</i>
                请填写收货联系方式。
              </span>
            </label>
            <label htmlFor="">
              <span>固定电话</span>
              <b>-</b>
              <input type="text" className="small" />
              <input type="text" className="big" />
              <span>（可选）区号-电话号码</span>
            </label>
            <Son data={data}></Son>
            {/* <label htmlFor="">
              <span>选择省市：</span>
              <select name="" id="" onChange={setone}>
                <option value="">--请选择--</option>
                {one.map((item, index) => {
                  return (
                    <option key={item.label}>
                      {item.value}
                    </option>
                  );
                })}
              </select>
              <select name="" id="">
                <option value="">--请选择--</option>
              </select>
              <select name="" id="">
                <option value="">--请选择--</option>
              </select>
              <span>
                <i>*</i>
                请选择收货省市信息.
              </span>
            </label> */}
            <label htmlFor="">
              <span>详细地址</span>
              <input type="text" className="input-home" />
              <i style={{ color: "red" }}>*</i>
            </label>
          </form>
        </div>
        <div className="footer">
          <label className="foot-top">
            <span className="foot-top-span">付款方式</span>
            <div>
              <div>
                <span>货到付款</span>
                <input type="checkbox" />
              </div>
              <div>
                <span>支付宝付款</span>
                <input type="checkbox" />
              </div>
              <div>
                <span>网银付款</span>
                <input type="checkbox" />
              </div>
            </div>
          </label>
          <label className="label">
            <span>订单备注:</span>
            <input type="text" />
            <i>*</i>
          </label>
          <label htmlFor="" className="label2">
            <span style={{ width: "20%" }}>验证码:</span>
            <input type="text" />
            <span>
              <i>*</i>
              手机和固定电话请至少填一项。
            </span>
          </label>
        </div>
        <div className="btn">
          <button>提交</button>
        </div>
      </div>
      <div className="right">
        <div className="top">
          <div>
            <span>全国免费订购咨询热线</span>
            <strong>400-0000-000</strong>
          </div>
          <div>
            <span>营业时间</span>
            <strong>8:00-23:00</strong>
          </div>
        </div>
        <div className="main">
          <div>
            <span>温馨提示</span>
            <p>1.为保障隐私，产品均以保密方式配送；</p>
            <p>2.本品纯天然产品，不可代替药品使用；</p>
            <p>
              3.为了保证您的权益，每盒产品防伪贴上验证码仅能验证1次，敬请知悉；
            </p>
            <p>4.为达最佳效果，请以套装坚持服用。</p>

            <div style={{ textAlign: "center", marginTop: "25px" }}>
              <img
                src="https://www.jq22.com/demo/jqueryorder201905160007/images/btn.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div className="footer">
          <ul>
            {[0, 1, 2, 3, 4, 5, 6].map((item, index) => {
              return (
                <li key={index}>
                  <span>广东 王小姐</span>
                  <span>1223****4456</span>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </div>
  );
};
export default App;
